<template>
    <div class="allbuju"> 
        <div id="top">
            <div class="r0">
            <el-icon :size="25" color="white" style="margin-left:20px; margin-top: 10px;"><Grid /></el-icon>
            <span style="margin-Left:30%; margin-top: 10px;color: white;">全金大厦</span>
            <el-icon :size="25" color="white" style="margin-right:20px; float: right; margin-top: 10px;"><ChatLineRound /></el-icon>
            </div>
            <div class="r1">
                <el-icon :size="85" color="white" style="float:left;"><PartlyCloudy /></el-icon>
                <span style="float:right; margin-right: 50px; font-size: 70px;">24</span>
                <span style="clear: both; float:right; margin-right: 10px; margin-top: -110px;font-size: 40px;">。</span>
                <br/>
                <span style="float:left;margin-top:10px; margin-left: -10px;">2022年12月30日</span>
                <span style="float:right;margin-top:10px; margin-right: 70px;">成都市</span>
                <el-icon color="white" style="float:right; margin-right:-64px; margin-top:11px;"><Location /></el-icon>
                <span style="float:left;margin-top:40px; margin-left: -100px;">星期三 成都市</span>
                <span style="float:right;margin-top:40px; margin-right: -70px;">空气质量: 良</span>
           </div>             
        </div>
        <div id="content">
            <el-icon :size="25" color="orange" style="margin-top:5px;margin-left: 20px;"><Position /></el-icon> 
            <span style="font-size:13px; margin-left: 5px; color: gray;">测试一次推送</span> 
            <hr/>  
            <div class="c1">
                <el-icon :size="70" color="rgb(134,190,255)" style="float:left;"><HomeFilled /></el-icon>
                <span style="float:left; margin-left: 20px;">全金大厦</span>
                <span style="float:right; margin-right: 20px;">30</span><br/>
                <span style="float:left; margin-top: 8px; margin-left: -40px; font-size: 10px; color: green;">2</span>
                <span style="float:right; margin-right: 22px; margin-top: 8px; font-size: 10px; color: green;">28</span><br/>
                <span style="float:left; margin-top: 8px;  margin-left: 35px; font-size: 12px;">出租</span>
                <span style="float:right; margin-right: -17px; margin-top: 8px; font-size: 12px;">出售</span>
            </div>
            <hr/>  
            <div class="c2">
                <el-icon :size="70" color="rgb(134,190,255)" style="float:left;"><MapLocation /></el-icon>
                <span style="float:left; margin-left: 20px;">电子巡更</span>
                <span style="float:right; margin-right: 20px;"></span><br/>
                <span style="float:left; margin-top: 8px; margin-left: -40px; font-size: 10px; color: green;">0</span>
                <span style="float:left; margin-top: 8px; margin-left: 40px; font-size: 10px; color: green;">0</span>
                <span style="float:left; margin-top: 8px; margin-left: 70px; font-size: 12px; color: green;">0</span>
                <span style="float:right; margin-right: 30px; margin-top: 8px; font-size: 12px; color: green;">0</span><br/>
                <span style="float:left; margin-top: 8px; margin-left: -180px; font-size: 10px;">待完成</span>
                <span style="float:left; margin-left: -100px; margin-top: 8px; font-size: 10px;">超时工单</span>
                <span style="float:left; margin-top: 8px;  margin-left: -25px; font-size: 12px;">异常工单</span>
                <span style="float:right; margin-right: 15px; margin-top: 8px; font-size: 12px;">已完成</span>
            </div>
            <hr/>
        </div>
        <Footer1/>
    </div>
</template>

<script>
import Footer1 from '@/components/shouye/Footer.vue';
import {Grid} from '@element-plus/icons'
import {ChatLineRound} from '@element-plus/icons'
import {PartlyCloudy} from '@element-plus/icons'
import {Location} from '@element-plus/icons'
import {Position} from '@element-plus/icons'
import {HomeFilled} from '@element-plus/icons'
import {MapLocation} from '@element-plus/icons'
export default {
  name: 'HomeView',
  components: {
    Grid,
    ChatLineRound,
    Footer1,
    PartlyCloudy,
    Location,
    Position,
    HomeFilled,
    MapLocation
  }
}
</script>

<style lang="less" scoped>
#top{
        width: 100%;
        height: 250px;
        //弹性布局！！！！！
        display: flex;                 ///！！！！！！
        justify-content: space-between; ///！！！！！！
        background:url("@/assets/ag.webp");
        position: relative;
}

.r0{
    width: 100%;
    height: 50px;
    position: absolute;
}
.r1{
    width: 100%;
    height: 200px;
    position: relative;
    margin-top: 70px;
    margin-left: 40px;
}
.r1>span{
    font-size: 14px;
    color: white;
}
#content{
    width: 100%;
    height: 515px;
    background-color: #f7f7f7;
}
.c1{
    margin-top: 6px;
    height: 70px;
    padding-left: 10px;
    background-color: white;
}
.c2{
    margin-top: 6px;
    height: 70px;
    padding-left: 10px;
    background-color: white;
}
hr{
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
}
</style>